<template>
  <!-- <a-card :bordered="false"> -->
  <PCard :isCardBorder="false" :isHeadBottomBorder="true" :shadow="'never'">
    <div slot="header" class="card-title-list">
      <span class="title">我的企业</span>
      <a-button
        v-has="'ee_list:click:qswts'"
        @click="SigningPowerAttorney"
        type=""
        :disabled="selectedRows.length > 0 ? false : true"
        style="float: right"
        icon="edit"
        >签署委托书
      </a-button>
      <a-button v-has="'ee_list:click:tjxqy'" @click="AddEvent" type="primary" style="float: right; margin-right: 10px" icon="plus"
        >添加新企业
      </a-button>
    </div>

    <div class="enterprise-list-con table-page-search-wrapper">
      <div class="list-query">
        <QueryCard :config="QueryCardConfig" :queryEvent="queryEvent"></QueryCard>
      </div>
      <div class="list-table">
        <a-table
          :row-selection="rowSelection"
          ref="table"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="tableData"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
          :scroll="{ x: 800, y: 500 }"
        >
          <!-- 字符串超长截取省略号显示-->
          <span slot="esContent" slot-scope="text">
            <j-ellipsis :value="text" :length="10" />
          </span>
          <span slot="statusSelect" slot-scope="text, record, index, indent">
            {{ statusSelect(record, indent) }}
          </span>

          <span slot="decimal2Ratio" slot-scope="text, record, index, indent">
            {{ getRatioForTable(text, record, indent) }}</span
          >
          <span slot="cent2Yuan" slot-scope="text, record, index, indent">
            {{ getCent2Yuan(text, record, indent) }}</span
          >
          <span slot="protocolType" slot-scope="text, record, index, indent">
            <a-tag v-if="text" :color="{1:'cyan',2:'purple',3:'pink'}[text]">
              {{ {1:'渠道总模式',2:'非渠道总模式',3:'混合模式'}[text] || '--' }}
            </a-tag>
            <span v-else>--</span>
          </span >

          <span slot="serviceRange" slot-scope="text, record, index, indent">
            {{ getserviceRange(text, record, indent) }}</span
          >
          <div slot="action" class="avtion-con" slot-scope="text, record, index, indent">
            <a href="javascript:;" v-has="'ee_list:click:czxq'" @click="goTo(record)">详情</a>
            <a-divider type="vertical" />
            <a href="javascript:;" v-has="configData.qystatus2ActionLabelHas[record['status']]" @click="getActionItem(text, record, index, indent)">{{
              getActionLabel(record, index, indent)
            }}</a>
          </div>
        </a-table>
      </div>
    </div>
    <SigningPowerAttorney :show="show" :dataList="selectedRows" :event="spaEvent"></SigningPowerAttorney>
    <EntMobileNumber
      v-if="EntMobileNumberConffig.legalVisibleStatus && EntMobileNumberConffig.entId"
      :visible="EntMobileNumberConffig.legalVisibleStatus"
      :entId="EntMobileNumberConffig.entId"
      :datas="EntMobileNumberConffig.datas"
      @legalModalHidden="legalModalHidden"
    />
  </PCard>
  <!-- <a-button @click="goTo">Default</a-button> -->
  <!-- </a-card> -->
</template>

<script>
import EntMobileNumber from '@/views/common/entMobileNumber'
// import { getCaptionFileName } from '@/utils/util'
import * as Util from '@/utils/util'
import pageEvent from './util/pageEvent'
import configData from './util/configData'
import { handleExportXlsNew } from '@/common/newHandleExportXls'
import SigningPowerAttorney from './component/SigningPowerAttorney.vue'
// 1、企业/法人名称：模糊搜索
// 2、渠道名称：模糊搜索
// 3、企业状态： 设立中/已设立/服务过期/业务暂停
// 4、注册时间：日期区间
// 5、服务截止日期：日期区间
// 6、累计开票金额：数字区间
// 7、费率：数字区间
// xs <576px sm ≥576px  md ≥768px lg ≥992px xl ≥1200px  xxl ≥1600px
const formItemAttr_ = { labelCol: { xxl: 10, xl: 12 }, wrapperCol: { xxl: 12, xl: 12 } }
// { labelCol: { span: 5 }, wrapperCol: { span: 16 } }
const formItemAttr1_ = { labelCol: { xxl: 5, xl: 8 }, wrapperCol: { xxl: 16, xl: 14 } }
// { labelCol: { span: 6 }, wrapperCol: { span: 18 } }
const formItemAttr2_ = { labelCol: { xxl: 6, xl: 9 }, wrapperCol: { xxl: 18, xl: 14 } }
// labelCol: { span: 10 }, wrapperCol: { span: 14 }
const formItemAttr3_ = { labelCol: { xxl: 10, xl: 9 }, wrapperCol: { xxl: 14, xl: 15 } }
const formItemAttr4_ = { labelCol: { xxl: 10, xl: 6 }, wrapperCol: { xxl: 14, xl: 18 } }
window['enterpriseList_param'] = null
export default {
  components: { SigningPowerAttorney,EntMobileNumber },
  data() {
    return {
      configData,
      // labelCol: { span: 4 },
      // wrapperCol: { span: 14 },
      // winConfig: {
      //   visible: false,
      //   title: '委托书签署',
      //   pdfUrl: '',
      //   dataList:{}
      // },
      // winConfig1: {
      //   visible: false,
      //   title: '电子签约',
      //   form: {
      //     phone: '18313548765',
      //     verificationCode: '',
      //     vcBtnDisabled:false,
      //     vcBtnLabel:'发送验证码',
      //   }
      // },
      EntMobileNumberConffig:{
        legalVisibleStatus:false,
        entId:'',
        datas:[]
      },
      show: false,
      QueryCardConfig: {
        pageFormConfig: {
          defaultFormConfig: {
            columnCount: 3,
            layout: 'horizontal',
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            rowAttr: {
              // type:'',
              // justify:'',
              // gutter:'',
              // align:'',
            },
            celAttr: {
              // flex:'',
              // offset:'',
              // order:'',
              // pull:'',
              // push:'',
              span: 8,
              // xxl:{},
            },
          },
          formConfig: {
            columnCount: 4,
            layout: 'horizontal',
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            rowAttr: {
              // type:'',
              // justify:'',
              // gutter:'',
              // align:'',
            },
            celAttr: {
              // flex:'',
              // offset:'',
              // order:'',
              // pull:'',
              // push:'',
              span: 6,
              // xxl:{},
            },
          },
        },
        btnGroupConfig: {
          // icon="download"
          btnList: [
            // { isDefault: true, label: '导出表单', eventKey: 'exportPage', isEvent: true, itemAttr: { icon: 'download' } },
          ],
        },
        formListConfig: {
          // 表示条件下拉的每行显示的条件个数
          columnCount: 4,
          // isDefault 表示要在默认位置显示的查询条件  suffix="RMB"
          formList: [
            {
              isDefault: true,
              enName: 'entName',
              cnName: '企业名称',
              type: 'input',
              value: '',
              itemAttr: { placeholder: '请输入企业名称', allowClear: true },
              formItemAttr: formItemAttr_,
            },
            {
              isDefault: true,
              enName: 'legalName',
              cnName: '企业负责人',
              type: 'input',
              value: '',
              itemAttr: { placeholder: '请输入企业负责人', allowClear: true },
              formItemAttr: formItemAttr_,
            },
            {
              isDefault: true,
              enName: 'status',
              cnName: '企业状态',
              type: 'select',
              value: '',
              itemAttr: { placeholder: '请选择企业状态', allowClear: true },
              formItemAttr: formItemAttr_,
              optionList: configData.qystatus,
            },
            // createTime  lastCreateTime
            {
              enName: 'createTime',
              cnName: '注册时间',
              type: 'rangePicker',
              value: [],
              itemAttr: { valueFormat: 'YYYY-MM-DD', placeholder: ['开始日期', '结束日期'] },
              formItemAttr: formItemAttr1_,
            },
            // serviceEnd  lastServiceEnd
            {
              enName: 'serviceEnd',
              cnName: '服务截止日期',
              type: 'rangePicker',
              value: [],
              itemAttr: { valueFormat: 'YYYY-MM-DD', placeholder: ['开始日期', '结束日期'] },
              formItemAttr: formItemAttr2_,
            },
            //  invoiceAmount  lastInvoiceAmount
            {
              enName: 'invoiceAmount',
              cnName: '累计开票金额',
              type: 'inputRange',
              value: [],
              itemAttr: { suffix: '元' },
              formItemAttr: formItemAttr3_,
              isRequire: [
                {
                  validator: (rule, value, callback) => {
                    pageEvent('handleRegMoneyCheck', null, rule, value, callback)
                  },
                },
              ],
            },
            // serviceFeeRate   lastServiceFeeRate
            {
              enName: 'serviceFeeRate',
              cnName: '费率',
              type: 'inputRange',
              value: [],
              itemAttr: { suffix: '%' },
              formItemAttr: formItemAttr4_,
              isRequire: [
                {
                  validator: (rule, value, callback) => {
                    pageEvent('handleRegMoneyCheck', null, rule, value, callback)
                  },
                },
              ],
            },
          ],
        },
      },
      loading: false,
      queryParam: {
        data: {},
        pageNo: 1,
        pageSize: 10,
      },
      tableData: [], //{ status: '11', registerType: '3',id:'11' }
      exportObj: {
        name: '导出明细',
        extension: '.xlsx',
        url: '/ent/info/exportEntInfo', // /ent/info/exportEntInfo
        data: {},
      },
      columns: configData.tableColumns,
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showSizeChanger: true,
      },
      // 选择的数据
      selectedRows: [],
      selectedRowKeys: [],
      // 用于设置禁止选择的数据
      disabledList: [
        //  10-信息采集中 11-登记注册认证未上传 12-未签署代征协议 20-待提交 40-审核中 60-审核拒绝 65-待签署委托书 70-待支付 80-工商注册中 90-核名失败 100-税种核定中
        // 110-税种核定中 111-首次登记未上传 112-税务实名未上传 130-税务办理中 131-税务办理失败 140-已设立 150-已注销 160-业务终端 170-服务到期
        { status: 10 },
        { status: 11 },
        { status: 12 },
        { status: 20 },
        { status: 40 },
        { status: 60 },
        { status: 70 },
        { status: 80 },
        { status: 90 },
        { status: 100 },
        { status: 110 },
        { status: 111 },
        { status: 112 },
        { status: 130 },
        { status: 131 },
        { status: 140 },
        { status: 150 },
        { status: 160 },
        { status: 170 },
      ],
      setTimer: null,
    }
  },
  computed: {
    rowSelection() {
      const {selectedRowKeys} = this
      return {
        selectedRowKeys: selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          this.selectedRows = selectedRows
          this.selectedRowKeys = selectedRowKeys
        },
        getCheckboxProps: (record) => {
          const temp = { props: {} }
          this.disabledList.forEach((item) => {
            const disabledObjArr = Object.keys(item)
            const key = disabledObjArr[0]
            const val = item[key]
            if (record[key] == val) {
              temp['props'] = { disabled: record[key] == val, [key]: record[key] }
            }
          })
          // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@',record,temp);
          return { ...temp }
        },
      }
    },
  },
  mounted() {
    this.queryParam = window['enterpriseList_param']
      ? { ...window['enterpriseList_param'] }
      : {
          data: {},
          pageNo: 1,
          pageSize: 10,
        }
    this.pageInit()
  },
  methods: {
    legalModalHidden(){
      this.EntMobileNumberConffig.entId = ''
      this.EntMobileNumberConffig.legalVisibleStatus = false
    },
    // 签署委托书
    SigningPowerAttorney() {
      if (this.selectedRows.length == 0) {
        this.$message.warning('需要先选择要签约的企业')
        return false
      }
      this.show = true
    },
    // 关闭
    spaEvent(restype) {
      // if (restype == 1 || restype == 2) {
      // }
      this.selectedRowKeys = []
      // console.log('@@@@@@@@@@@@@@@@@@', restype,this.selectedRowKeys)
      this.pageInit()
      this.show = false
      // this.$router.go(0)
    },
    queryEvent(type, data) {
      // channelName:""
      // createTime:Array(0)
      // invoiceAmount:Array(2)
      // queryName: ""
      // serviceEnd:Array(0)
      // serviceFeeRate:Array(2)
      // status:""
      if (type === 'query') {
        if (data) {
          const { createTime, invoiceAmount, serviceEnd, serviceFeeRate, ...args } = data
          const queryData = { ...args }
          if (Object.prototype.toString.call(createTime) === '[object Array]' && createTime.length > 0) {
            queryData['createTime'] = createTime[0] || ''
            queryData['lastCreateTime'] = createTime[1] || ''
          }
          // 起始累计开票额
          if (Object.prototype.toString.call(invoiceAmount) === '[object Array]' && invoiceAmount.length > 0) {
            queryData['invoiceAmount'] = Util.conversionBranch(invoiceAmount[0])
            queryData['lastInvoiceAmount'] = Util.conversionBranch(invoiceAmount[1])
          }
          // 起始服务结束时间2022/6/30
          if (Object.prototype.toString.call(serviceEnd) === '[object Array]' && serviceEnd.length > 0) {
            queryData['serviceEnd'] = serviceEnd[1] || ''
            queryData['lastServiceEnd'] = serviceEnd[0] || ''
          }
          // 服务费率
          if (Object.prototype.toString.call(serviceFeeRate) === '[object Array]' && serviceFeeRate.length > 0) {
            queryData['serviceFeeRate'] = Util.percentageConverse(serviceFeeRate[0])
            queryData['lastServiceFeeRate'] = Util.percentageConverse(serviceFeeRate[1])
          }
          this.queryParam.pageNo = 1
          this.queryParam.data = queryData
        }
        this.pageEvent('getDataForTableList')
      }
      if (type === 'exportPage') {
        // 数据导出
        this.handleExportXlsFun()
      }
      console.log('queryEvent===>', type, data)
    },
    pageEvent(type, ...args) {
      return pageEvent(type, this, ...args)
    },

    pageInit() {
      this.queryEvent('query', null)
      window['enterpriseList_param'] = null
    },
    getCent2Yuan(num) {
      return Util.conversionElement(Number(num)) + '元'
    },
    getRatioForTable(num) {
      return Util.percentConversion(Number(num)) + '%'
    },
    /**
     * 换取 服务截止时间
     * @param {*} text
     * @param {*} record
     * @param {*} indent
     */
    getserviceRange(text, record, indent) {
      const tempV1 = record['serviceStart'] || ''
      const tempV2 = record['serviceEnd'] || ''
      let res = tempV1.toString().split(' ')[0] + '~' + tempV2.toString().split(' ')[0]
      return res
    },
    /**
     *  获取指定数据的值
     * @param {*} tableCellItem
     */
    statusSelect(tableCellItem, indent) {
      const key = indent.key
      const selectList = {
        status: configData.qystatus,
        registerType: configData.qyType,
      }
      // bizStatus   statusName
      let res = ''
      const val = tableCellItem[key]

      selectList[key].forEach((item) => {
        const { enName, cnName } = item
        if (val == enName) {
          res = cnName
        }
      })
      // console.log('statusSelect===>', tableCellItem, key, selectList[key], res,'|',val);
      return res
    },
    //下载文件 用于excel导出
    handleExportXlsFun() {
      // exportObj.data = this.queryParam;
      this.exportObj.data = this.queryParam
      return handleExportXlsNew(this.exportObj, this)
    },
    //跳转详情
    goTo(record, lock) {
      sessionStorage.setItem('qsb-details', JSON.stringify(record))
      const status_ = record['status']
      const tempUrlList = {
        0: '/enterprise/enterpriseList/enterpriseDetails',
        1: '/enterprise/enterpriseList/enterpriseDetails1', // 已设立
      }
      // 已设立集合
      const SetupList = [140, 150, 170]
      let tempAction = 0
      if (SetupList.indexOf(status_) >= 0) {
        tempAction = 1
      }
      const tempActionList = {
        10: 0,
        11: 0,
        12: 0,
        20: 0,
        40: 0,
        60: 0,
        65: 0,
        70: 0,
        80: 0,
        90: 0,
        110: 0,
        111: 0,
        112: 0,
        130: 0,
        131: 0,
        140: 1,
        150: 1,
        160: 0, // 业务终止
        170: 1,
      }

      console.log('跳转详情===>', record, lock, status_)
      this.$router.push({
        // path: tempUrlList[tempActionList[status_]],
        path: tempUrlList[tempAction],
        query: {
          bizId: record.id,
        },
      })
    },
    AddEvent() {
      // sessionStorage.setItem('qsb-details', JSON.stringify(record))
      this.$router.push({
        path: '/enterprise/addEnterprise',
      })
    },

    handleTableChange(pagination, filters, sorter) {
      console.log('handleTableChange===>', pagination, filters, sorter)
      // current: 1, pageNo:1,
      this.queryParam.pageNo = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      //分页、排序、筛选变化时触发
      this.ipagination = pagination
      this.pageEvent('getDataForTableList')
    },
    getActionLabel(record, index, indent) {
      let res = ''
      const status_ = record['status']
      res = configData.qystatus2ActionLabel[status_]
      return res
    },
    async getActionItem(text, record, index, indent) {
      const status_ = record['status']
      // getLegalInfo
      const res = await this.pageEvent('getLegalInfo', record['id'])
      if(res.res===true){
        this.pageEvent('qystatus2Action', status_, record, index)
      }else{
        this.EntMobileNumberConffig.entId = record['id']
        this.EntMobileNumberConffig.legalVisibleStatus = true
        this.EntMobileNumberConffig.datas = res.data
      }

      console.log('getActionItem===>', text, record, index, indent,configData.qystatus2ActionLabel)
      // this.pageEvent('qystatus2Action', status_, record, index)
    },
  },
}
</script>

<style lang="less">
.enterprise-list-con {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 8px;
  }

  .avtion-con {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 40px;
  }
}

.card-con .card-body {
  width: 100%;
}

.card-title-list {
  .title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
}
</style>
